<script setup lang="ts">
import { useUserFriendStore, useWebSocketStore } from '/@/store'
import { storeToRefs } from 'pinia'
import { Search } from '@element-plus/icons-vue'
import { nextTick, onMounted, watch } from 'vue'

const userFriendStore = useUserFriendStore()
const webSocketStore = useWebSocketStore()

const { contactList } = storeToRefs(userFriendStore)
const { currentRoomId } = storeToRefs(webSocketStore)

const chatUlRef = ref<HTMLElement | null>(null)

const scrollToBottom = async () => {
  await nextTick()
  if (chatUlRef.value) {
    chatUlRef.value.scrollTop = chatUlRef.value.scrollHeight
  }
}

// 监听消息列表变化
watch(
  contactList,
  () => {
    scrollToBottom()
  },
  { deep: true },
)

onMounted(() => {
  scrollToBottom()
})

const formatDate = (date: string) => {
  const now = new Date()
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
  const inputDate = new Date(date)
  // 如果是今天
  if (inputDate >= today) {
    // 返回小时和分钟
    return inputDate.getHours() + ':' + inputDate.getMinutes()
  } else {
    // 否则返回年月日
    return (
      inputDate.getFullYear() +
      '/' +
      (inputDate.getMonth() + 1) +
      '/' +
      inputDate.getDate()
    )
  }
}

const change = (item: number | undefined) => {
  if (item !== undefined) {
    currentRoomId.value = item
  }
}
const input1 = ref<string>('')
</script>

<template>
  <div class="conversation-container">
    <div class="input">
      <el-input v-model="input1" placeholder="搜索" :suffix-icon="Search" />
    </div>
    <div class="chat-ul" ref="chatUlRef">
      <div
        class="chat-li"
        v-for="(item, index) in contactList"
        :key="index"
        @click="change(item.roomId)"
      >
        <el-row :gutter="8" class="chat-row">
          <el-col :span="4" class="chat-list-left">
            <el-avatar
              shape="square"
              class="image"
              :size="36"
              :src="item.avatar"
            />
          </el-col>
          <el-col :span="20" class="chat-list-center">
            <div class="top">
              <div class="title">
                <span class="name text-ellipsis">{{ item.name }}</span>
                <span class="special">官方</span>
              </div>
              <div class="time">
                <p>{{ formatDate(item.activeTime) }}</p>
              </div>
            </div>
            <div class="bottom">
              <div class="last-message-desc">
                <p class="text-ellipsis">{{ item.text }}</p>
              </div>
              <div class="unread-wrapper">
                <span
                  class="unread"
                  v-if="item.unreadCount !== undefined && item.unreadCount > 0"
                >
                  {{ item.unreadCount === undefined ? 0 : item.unreadCount }}
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.conversation-container {
  height: calc(100vh - 120px);
  border-right: 1px solid #eaeaea;
  background: #ffffff;

  .input {
    padding: 12px;
    border-bottom: 1px solid #eaeaea;

    :deep(.el-input__wrapper) {
      border-radius: 20px;
      background: #f5f7fa;
    }
  }
}

.chat-ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;
  }

  .chat-li {
    width: 100%;
    padding: 10px;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;

    &:hover {
      background-color: #f5f7fa;
    }

    .chat-row {
      margin: 0 !important;
      flex-wrap: nowrap;
    }

    .chat-list-left {
      padding: 0 4px;
      display: flex;
      align-items: center;

      .el-avatar {
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    .chat-list-center {
      padding: 0 4px;
      min-width: 0; // 关键：确保子元素可以正确收缩

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;

        .title {
          display: flex;
          align-items: center;
          min-width: 0; // 关键：确保子元素可以正确收缩
          flex: 1;

          .name {
            font-weight: 500;
            color: #2c3e50;
            margin-right: 8px;
            flex: 1;
            min-width: 0;
          }

          .special {
            padding: 2px 6px;
            background: #fef6e7;
            color: #e6a23c;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
          }
        }

        .time {
          color: #909399;
          font-size: 12px;
          margin-left: 8px;
          white-space: nowrap;

          p {
            margin: 0;
          }
        }
      }

      .bottom {
        display: flex;
        align-items: center;

        .last-message-desc {
          flex: 1;
          min-width: 0;
          color: #606266;
          font-size: 13px;
          margin: 0;

          p {
            margin: 0;
            line-height: 1.4;
          }
        }

        .unread-wrapper {
          margin-left: 8px;

          .unread {
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            background: #f56c6c;
            color: white;
            border-radius: 10px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
